---
type: tutorial
unitTitle: 搭建并部署你的第一个 Astro 网站
title: '第一单元：前期准备'
description: >-
  教程：搭建你的 Astro 博客 —

  准备好开发环境，然后创建并部署你的第一个 Astro 网站
---
import Checklist from '~/components/Checklist.astro';
import Box from '~/components/tutorial/Box.astro';
import { Steps } from '@astrojs/starlight/components';

现在你已经知道你要搭建什么了，是时候来设置你所需的所有工具！

本单元将向你展示如何设置开发环境并部署网站到 Netlify。如果你已经熟悉自己的环境和工作流程，可以直接跳到[第二单元](/zh-cn/tutorial/2-pages/)。

:::tip[使用 StackBlitz]

想要在在线代码编辑器中完成这个教程吗？
<details>

<summary>按照以下说明操作，然后直接进入第二单元！</summary>

**设置 StackBlitz**

<Steps>
1. 访问 [astro.new](https://astro.new) 然后点击 `Empty Project` 的 `Open in StackBlitz` 按钮以在 StackBlitz 中打开它。

2. 在右上方点击 `Sign in` 以使用你的 GitHub 账号登录。

3. 在 StackBlitz 编辑器窗口的左上方，点击 `fork` 模板（保存到你自己的账号中）。

4. 等待项目加载完毕，你将看到 `Empty Project` 的实时预览。
</Steps>

**进行修改**

在文件窗口中，你应该可以看到 `src/pages/index.astro`。点击打开它，按照[编写你的第一行 Astro 代码](/zh-cn/tutorial/1-setup/3/)来修改此文件。

**创建 GitHub 仓库**

<Steps>
1. 点击文件列表顶部的 <kbd>Connect Repository</kbd> 按钮，输入一个新的仓库名称，然后点击 <kbd>Create repo & push</kbd>。

2. 当你有修改要提交到 GitHub 时，工作区左上方将出现一个 `Commit` 按钮。点击此按钮并输入提交信息 `commit message`，然后它将被提交到你的仓库。
</Steps>

**部署你的网站**

如果你想部署到 Netlify，请跳至[将你的网站部署到网络](/zh-cn/tutorial/1-setup/5/)。
否则，请跳至[第二单元](/zh-cn/tutorial/2-pages/)开始使用 Astro 进行搭建！

</details>
:::

## 本单元目标

在本单元中，你将会**创建一个新项目**，该项目将**存储在 Github** 并且**连接到 Netlify**。

在编写代码的过程中，你将定期将更改提交到 GitHub。Netlify 将使用 GitHub 存储库中的文件来构建你的网站，然后将其发布到一个唯一的地址上，任何人都可以在互联网上查看它。

每当你提交更改到 GitHub 时，它会向 Netlify 发送通知。然后，Netlify 将自动重新构建和重新发布你的网站以应用这些更改。

<Box icon="check-list">

## 任务清单

<Checklist>
- [ ] 我已经准备好了一个用于 Astro 项目的开发环境！
</Checklist>
</Box>
